<!-- 一个节点  包含 面板 + 连线 -->
<template>
    <!-- <div class="flow-single-node">
        <Panel :class="warnClass" :data = "nodeData" :backgroundImage="backgroundImage" :readonly="readonly">
          
        </Panel>
        <Line :nodeId="nodeData.nodeId" :readonly="readonly" ></Line>
       
    </div> -->

    <div class="flow-single-node">
            <Node :panelClass="warnClass" :nodeData="nodeData" :readonly="readonly" :backgroundImage="backgroundImage">
                <template v-slot:body="{nodeData}">
                    <slot name="body" :nodeData="nodeData"></slot>
                </template>
            </Node>
         
        </div>
</template>

<script setup>
import Panel from './panel.vue'
import Line from  './line.vue'
import {defineProps, ref, toRefs, watch} from  'vue'
const props = defineProps({
    nodeData:{},
    bodyClass:{
        type: String,
        default: ''
    },
    readonly: {
        type: Boolean,
        default:false,
    }
   
})
const {nodeData} = toRefs(props);

const warnClass = ref("");

watch( ()=> nodeData.value.value, (newV) => {
    if(newV == null || newV == undefined || newV.length == 0){
        warnClass.value = "flow-warn"
    }
    else {
        warnClass.value = "";
    }
},{
    immediate: true,
    deep: true
})

const backgroundImage = ref("linear-gradient(to right, #7474BF 0%, #348AC7  51%, #7474BF  100%)")
</script>

<style  scoped>
    
   .flow-single-node{
        padding-left: var(--golbal-flow-node-padding);
        padding-right: var(--golbal-flow-node-padding);
        position: relative;
        justify-content: center;
        margin-top: 15px;
        display: grid;
        z-index: 1;
        background-color: var(--global-flow-background-color);

   }
   .flow-single-node::before{
        content: "";
        position: absolute;
        top: -16px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translate(-50%);
        width: 0;
        height: 4px;
        border-style: solid;
        border-width: 12px 6px 0px;
        border-color: var(--global-flow-line-color) transparent transparent;
        background: var(--global-flow-background-color)

   }
</style>